<template>
    <div>
        <div class="address_choose">
        <div class="location_head">
            <div class="lh_left location_back">
                <router-link to="/user">
                    <i class="lh_coin"></i>
                </router-link>
            </div>
            <h1><span @click="isShowCity=!isShowCity" class="lh_cityName">选择地址</span><i class="lh_city lh_coin"></i></h1>
        </div>
        <div class="location_search">
            <div class="ls_input"><i class="ls_coin" onclick="searchListAddress()"></i><input id="searchText" class="search_text" type="text" placeholder="请输入您要搜索的地址" onkeydown="enterSearchAddress()"></div>
        </div>
        <div ref="citychoose" class="choose_city">
            <div class="choose_city_head">
                <div class="lh_left cch_left">
                    <i class="lh_coin"></i>
                </div>
                <h1>选择城市</h1>
            </div>
            <div class="choose_city_box">
    <div class="city_list" id="city_list" style="margin-top:0;">
        <ul>
            <li v-for="(item,index) in cityList" :key="index" class="city_list_li">
                <div :id="item.Initial">{{item.Initial}}</div>
                <ul v-for="(ite,idx) in item.Cities" :key="idx">
                    <li :isopenbrandclub="ite.IsOpenBrandClub" @click="selectedCity(ite.CityName)">{{ite.CityName}}</li>
                </ul>
            </li>
        </ul>
        <div class="city_list_guide">
            <ul>
                <li cityfirstletter="B">B</li>
                <li cityfirstletter="C">C</li>
                <li cityfirstletter="D">D</li>
                <li cityfirstletter="F">F</li>
                <li cityfirstletter="G">G</li>
                <li cityfirstletter="H">H</li>
                <li cityfirstletter="K">K</li>
                <li cityfirstletter="L">L</li>
                <li cityfirstletter="M">M</li>
                <li cityfirstletter="N">N</li>
                <li cityfirstletter="P">P</li>
                <li cityfirstletter="Q">Q</li>
                <li cityfirstletter="S">S</li>
                <li cityfirstletter="T">T</li>
                <li cityfirstletter="X">X</li>
                <li cityfirstletter="Z">Z</li>
            </ul>
        </div>
    </div>
            </div>
        </div>
        <!-- //没有地址的时候显示 -->
        <div class="location_search_record" style="display:block;">                    
            <div class="ls_address">
                <div id="ls_address_list" class="ls_address_list"></div>
                <div id="ls_history">
                    <div class="ls_history" style="display: none;">
                        <div class="ls_h_title">搜索记录</div>
                        <div class="ls_h_box">
                        </div>
                        <div class="ls_h_clearSession"><i class="ls_h_c_coin"></i>清除搜索记录</div>
                    </div>
                    <div class="ls_none" style="display: block;">
                        <img src="https://m.9bianli.com/Images/fodder/map/map_search_no.png">
                        <div>暂无搜索记录</div>
                    </div>
                </div>                        
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import {getCityList} from '../api/getgoods'
    export default {
        data(){
            return{
                isShowCity:false,
                cityList:[]
            }
        },
        methods: {
            selectedCity(cityname){
                this.$store.commit('citySelect/changeCityName',cityname)
                this.$router.push('/')
            }
        },
        watch: {
            isShowCity(newvalue) {
                if(newvalue){
                    this.$refs.citychoose.style.display='block'
                    getCityList().then(res=>{
                        this.cityList=res.data.Citys
                    })
                }
                    
                else
                    this.$refs.citychoose.style.display='none'
            }
        },
    }
</script>
<style scoped src="../assets/css/map.css" ></style>
<style lang="scss" scoped>

</style>